<template>
  <input type="text" class="input" :value="value" v-on="eventDict">
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  computed: {
    eventDict() {
      var self = this;
      //如果下层组件还有自定义事件触发，那么都保存在$listeners中，这里没有下层组件
      return Object.assign({}, this.$listeners, {
        input: function(event) {
          self.$emit("input", event.target.value);
        }
      });
    }
  }
};
</script>
<style lang="scss">
.input {
  height: 20px;
  margin-top: 10px;
  display: inline-block;
  background: #faffbd;
  border: 1px solid #b8b8b8;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
}
</style>

